﻿<%@ Page Title="Mobilhjulskift.dk - Ledige tider" Language="C#" MasterPageFile="~/WebsiteSub.master" AutoEventWireup="true" CodeBehind="LedigeTider.aspx.cs" Inherits="TireService.Website.LedigeTider" %>
<%@ Register Assembly="DevExpress.Web.ASPxEditors.v11.1, Version=11.1.12.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web.ASPxEditors" TagPrefix="dx" %>
<%@ Register Assembly="DevExpress.Web.v11.1, Version=11.1.12.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web.ASPxCallback" TagPrefix="dx" %>
<%@ Register Assembly="DevExpress.Web.v11.1, Version=11.1.12.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web.ASPxCallbackPanel" TagPrefix="dx" %>
<%@ Register assembly="DevExpress.Web.v11.1, Version=11.1.12.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxPanel" tagprefix="dx" %>
<%@ Register Assembly="DevExpress.Web.v11.1, Version=11.1.12.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web.ASPxLoadingPanel" TagPrefix="dx" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

    <meta name="description" content="Se ledige tider for hjulskift til din bil." />
    <meta name="keywords" content="ledige tider hjulskift bestil dæk mobil abonnement" />

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="content" runat="server">

<div id="box1">
    <h1>Se ledige tider</h1>
    <p class="normaltext">
        Du kan hurtigt her se hvornår der er ledige tider i dit område inden du opretter dig som abonnent. <br /><br />
        
        Hvis du ikke kan finde en tid kan det skyldes at vi ikke lige har planlagt kørsler i dit område - fortvivl ikke, men kontakt vores kunde support så finder vi en løsning.
    </p>
        <dx:ASPxLoadingPanel ID="LoadingPanel" Text="Vent venligst..." ClientInstanceName="LoadingPanel" runat="server" Modal="True">
        </dx:ASPxLoadingPanel>

        <!-- Javascript: Select ZipCode -->
        <script language="javascript" type="text/javascript">

            // Function that will show free dates based on entered address
            function SearchOnZipCode() {
                // Validate value
                txtZipCode.Validate();

                var isFormValid = ASPxClientEdit.ValidateGroup("SelectZipCode");
                if (isFormValid) {
                    // Form is valid - show free dates

                    // Hide timeslot panel (in case new address is being selected)
                    callbackSelectTimeslotPanel.SetVisible(false);
                    callbackCustomerSelection.SetVisible(false);

                    // Prepare input (0: ZipCode)
                    var input = txtZipCode.GetText();

                    // Do server postback
                    callbackSelectDatePanel.PerformCallback(input);

                    // Show loadingpanel while doing server postback
                    LoadingPanel.Show();
                }
            }

            function CallBackError(s, e) {
                // Hide loadingpanel in case it is running
                LoadingPanel.Hide();

                alert('Fejl opstod: ' + e.message);
            }

        </script>

        <table>
            <tr>
                <td><b>Postnr</b></td>
                <td>
                    <dx:ASPxTextBox ID="txtZipCode" ClientInstanceName="txtZipCode" runat="server" Width="200px">
                        <ValidationSettings CausesValidation="true" ValidationGroup="SelectZipCode" RequiredField-IsRequired="true" RequiredField-ErrorText="Indtast postnr" SetFocusOnError="true" ErrorDisplayMode="ImageWithTooltip">
                            <RequiredField IsRequired="True" ErrorText="Indtast postnr"></RequiredField>
                        </ValidationSettings>
                        <ClientSideEvents KeyDown="function(s, e) {if(ASPxClientUtils.GetKeyCode(e.htmlEvent) ===  ASPxKey.Enter) SearchOnZipCode();}" />
                    </dx:ASPxTextBox>
                </td>
                <td>
                    <dx:ASPxButton ID="btnZipCodeSearch" ClientInstanceName="btnZipCodeSearch" runat="server" Text="Find tid" AutoPostBack="False" UseSubmitBehavior="False">
                        <ClientSideEvents Click="function(s, e) { SearchOnZipCode(); }" />
                    </dx:ASPxButton>
                </td>
            </tr>
        </table>    
        <table>
            <tr>
                <td valign="top">

                    <!-- Javascript: Select date Panel  -->
                    <script language="javascript" type="text/javascript">

                        function OnSelectDatePanelComplete(s, e) {
                            // Hide loadingpanel after postback
                            LoadingPanel.Hide();

                            // Show panel
                            callbackSelectDatePanel.SetVisible(true);

                            if (ddlSelectDate.GetItemCount() == 0) {
                                ddlSelectDate.SetVisible(false);
                                lblDateSearchMessage.SetVisible(true);
                                lblDateSearchMessage.SetText("<br>Ingen ledige dato'er blev fundet for valgt postnr. Prøv et andet område eller kontakt vores kundesupport.");
                                //callbackNoDateFit.SetVisible(true);
                            } else {
                                ddlSelectDate.SetVisible(true);
                                lblDateSearchMessage.SetVisible(false);
                                //callbackNoDateFit.SetVisible(false);
                            }
                        }

                        // Function that will show free timeslots on selected date
                        function ShowTimeSlots(s, e) {

                            // Callback server to get available timeslots
                            callbackSelectTimeslotPanel.PerformCallback();

                            // Show loadingpanel while doing server postback
                            LoadingPanel.Show();
                        }

//                        function RejectTimeslot(s, e) {
//                            LoadingPanel.Show();

//                            callbackNoDateFit.PerformCallback(txtComment.GetText());

//                        }

//                        function OnNoDateFitComplete(s, e) {
//                            // Hide loadingpanel after postback
//                            LoadingPanel.Hide();

//                            alert('Tak for din besked, du vil blive kontaktet af vores support - du stilles nu videre til forsiden.');

//                            window.open('../Index.aspx', '_self');
//                        }

                    </script>

                    <!-- Select date Panel -->
                    <dx:ASPxCallbackPanel ID="callbackSelectDatePanel" ClientInstanceName="callbackSelectDatePanel" runat="server" OnCallback="callbackSelectDatePanel_Callback" RenderMode="Table" ClientVisible="false">
                        <ClientSideEvents EndCallback="OnSelectDatePanelComplete" CallbackError="CallBackError" />
                        <PanelCollection>
                            <dx:PanelContent>
                                <b>Mulige dato'er</b>
                                <dx:ASPxLabel ID="lblDateSearchMessage" ClientInstanceName="lblDateSearchMessage" runat="server" Text="" ClientVisible="false">
                                </dx:ASPxLabel>
                                <dx:ASPxComboBox ID="ddlSelectDate" ClientInstanceName="ddlSelectDate" IncrementalFilteringMode="StartsWith" DropDownStyle="DropDownList" runat="server">
                                    <ClientSideEvents SelectedIndexChanged="function(s, e) { ShowTimeSlots(); }" />
                                    <ValidationSettings CausesValidation="true" ValidationGroup="SelectDate" RequiredField-IsRequired="true" RequiredField-ErrorText="Vælg dato" SetFocusOnError="true" ErrorDisplayMode="ImageWithTooltip">
                                        <RequiredField IsRequired="True" ErrorText="V&#230;lg dato"></RequiredField>
                                    </ValidationSettings>
                                </dx:ASPxComboBox>

                                <%--<!-- None of the dates fit the user - show alternative booking method -->
                                <dx:ASPxCallbackPanel ID="callbackNoDateFit" ClientInstanceName="callbackNoDateFit" runat="server" OnCallback="callbackNoDateFit_Callback" RenderMode="Table" ClientVisible="false">
                                    <ClientSideEvents EndCallback="OnNoDateFitComplete" CallbackError="CallBackError" />
                                    <PanelCollection>
                                        <dx:PanelContent>
                                            <br />
                                            Kommentar - forslag til nye dato'er og/eller anden adresse:<br />
                                            <dx:ASPxMemo ID="txtComment" ClientInstanceName="txtComment" runat="server" Height="80px" Width="200px" 
                                                NullText="Note/Kommentar">
                                            </dx:ASPxMemo>
                                            <br />
                                            <dx:ASPxButton ID="btnSend" ClientInstanceName="btnSend" runat="server" Text="Send" AutoPostBack="False" UseSubmitBehavior="False">
                                                <ClientSideEvents Click="function(s, e) { RejectTimeslot(); }" />
                                            </dx:ASPxButton>
                                        </dx:PanelContent>
                                    </PanelCollection>
                                </dx:ASPxCallbackPanel>--%>
                            </dx:PanelContent>
                        </PanelCollection>
                    </dx:ASPxCallbackPanel>
                </td>
                <td valign="top">
                    <!-- Javascript: Select timeslot Panel  -->
                    <script language="javascript" type="text/javascript">


                        function OnSelectTimeslotPanelComplete(s, e) {
                            // Hide loadingpanel after postback
                            LoadingPanel.Hide();

                            // Show panel
                            callbackSelectTimeslotPanel.SetVisible(true);

                            callbackCustomerSelection.SetVisible(true);
                        }

                        function SelectTimeSlot(s, e) {
                            // Validate values
                            rblSelectTimeslot.Validate();

                            var isFormValid = ASPxClientEdit.ValidateGroup("SelectTimeslot");
                            if (isFormValid) {

                                var input = rblSelectTimeslot.GetValue();

                                // Callback server to show approval of booking
                                callbackApproveBookingPanel.PerformCallback(input);

                                // Show loadingpanel while doing server postback
                                LoadingPanel.Show();
                            }
                        }

                    </script>

                    <!-- Select timeslot Panel -->
                    <dx:ASPxCallbackPanel ID="callbackSelectTimeslotPanel" ClientInstanceName="callbackSelectTimeslotPanel" runat="server" OnCallback="callbackSelectTimeslotPanel_Callback" RenderMode="Table" ClientVisible="false">
                        <ClientSideEvents EndCallback="OnSelectTimeslotPanelComplete" CallbackError="CallBackError" />
                        <PanelCollection>
                            <dx:PanelContent>
                
                                <b>Mulige tidsrum</b>
                                <%--<dx:ASPxButton ID="btnBuyShortTimeslotInterval" ClientInstanceName="btnBuyShortTimeslotInterval" runat="server" Text="Køb 2 timers interval (Pris 50kr)" AutoPostBack="False" UseSubmitBehavior="False">
                                    <ClientSideEvents Click="function(s, e) { BuyShortTimeslotInterval(); }" />
                                </dx:ASPxButton>
                                <dx:ASPxButton ID="btnCancelBuyTimeslotInterval" ClientInstanceName="btnCancelBuyTimeslotInterval" runat="server" Text="Annuller køb af 2 timers interval" AutoPostBack="False" UseSubmitBehavior="False">
                                    <ClientSideEvents Click="function(s, e) { CancelBuyTimeslotInterval(); }" />
                                </dx:ASPxButton>
                                <br />--%>
                                <dx:ASPxRadioButtonList ID="rblSelectTimeslot" ClientInstanceName="rblSelectTimeslot" runat="server" Font-Size="Larger" AutoPostBack="false">
                                    <ValidationSettings ValidationGroup="SelectTimeslot" RequiredField-IsRequired="true" ErrorDisplayMode="ImageWithTooltip" RequiredField-ErrorText="Vælg tidsrum">
                                    </ValidationSettings>
                                </dx:ASPxRadioButtonList>
                                


                            </dx:PanelContent>
                        </PanelCollection>
                    </dx:ASPxCallbackPanel>
                </td>
                <td valign="top">
                    <!-- Select timeslot Panel -->
                    <dx:ASPxCallbackPanel ID="callbackCustomerSelection" ClientInstanceName="callbackCustomerSelection" runat="server" RenderMode="Table" ClientVisible="false">
                        <PanelCollection>
                            <dx:PanelContent>
                            <table>
                                <tr>
                                    <td>
                                        <h3>Ny kunde?</h3>
                                        <dx:ASPxButton ID="btnSignUp" runat="server" PostBackUrl="Bestilling.aspx" Text="Opret abonnement" Width="150px" Height="75px">
                                        </dx:ASPxButton>
                                    </td>
                                    <td>
                                        <h3>Allerede kunde?</h3>
                                        <dx:ASPxButton ID="btnLogin" runat="server" Text="Login" PostBackUrl="~/Kunde/Index.aspx"  Width="150px" Height="75px">
                                        </dx:ASPxButton>
                                    </td>
                                </tr>
                            </table>
                            </dx:PanelContent>
                        </PanelCollection>
                    </dx:ASPxCallbackPanel>
                </td>
            </tr>
        </table>
    
</div>    

</asp:Content>
